<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hello Vue</title>
</head>
<body>
<style>
    [v-cloak] {
        display: none;
    }
</style>
<div id="app">
    <!--
    v-cloak 这个指令保持在元素上直到关联实例结束编译。
    和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
    Vue的Mustache语法翻译可能可以延迟的情况，延迟的情况下我们写的{{data}}}就出现一个没有翻译的“{{data}}”,在界面上展示出就会不友好，
    这时候就需要可以使用v-cloak指令，这个指令就是当数据未解析完成时会渲染什么样式,当数据渲染出来之后v-cloak的样式就失效了
      -->
    <!-- 最简单的使用-->
    <h1 v-cloak>{{message}}</h1>
    <h1>{{message}}</h1>

    <!--注意
    在实际项目中，我们常通过 @import 来加载 css 文件
@import "style.css"
而 @import 是在页面 DOM 完全载入后才会进行加载，如果我们将 [v-cloak] 写在 @import 加载的 css 文件中，就会导致页面仍旧闪烁。
为了避免这种情况，我们可以将 [v-cloak] 写在 link 引入的 css 中，或者写一个内联 css 样式，这样就得到了解决。
    -->

</div>
</body>
<script src="../../css/vue.js"></script>
<script>
    setTimeout(() => {
        new Vue({
            el: '#app',
            data: {
                message: 'hello vue'
            }
        })
    }, 2000)
</script>
</html>
